<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_员工列表练习</title>
</head>
<body>
<input type="text" placeholder="请输入员工姓名" id="#i1">
<input type="text" placeholder="请输入员工工资" id="#i2">
<input type="text" placeholder="请输入员工岗位" id="#i3">
<button onclick="addEm()">点击添加员工</button>
<hr>
<table border="1px">
    <caption>员工表</caption>
    <tr>
        <th>员工姓名</th>
        <th>员工工资</th>
        <th>员工岗位</th>
    </tr>
    <script>
        function addEm(){
            let arr = [] ;
            let uName = document.querySelector('#i1').value.trim();
            let uSalary = document.querySelector('#i2').value.trim();
            let uJob = document.querySelector('#i3').value.trim();

            if (!uName || !uSalary || !uJob){
                alert('请输入完整的用户信息');
                return;
            }
            console.log(uName,uSalary,uJob);
            let  trE = document.createElement('tr');
            let  nameTd =document.createElement('td');
            let  salaryTd =document.createElement('td');
            let  jobTd =document.createElement('td');

            nameTd.innerHTML =uName;
            salaryTd.innerHTML = uSalary;
            jobTd.innerHTML =uJob;

            trE.append(nameTd,salaryTd,jobTd);
            console.log(trE,nameTd,salaryTd,jobTd);

            let tableE = document.querySelector('table');
            tableE.append(trE)

            document.querySelector('#i1').value= '';
            document.querySelector('#i2').value= '';
            document.querySelector('#i3').value= '';

            arr.push({
                name:uName,
                salary:uSalary,
                job:uJob
            })
            console.log(arr);
        }
    </script>
</table>
</body>
</html>